<template>
	<!-- 图片 -->
	<div class="image">
		<div class="imageCont">
			<ul>
				<li v-for="(url, index) in image" :key="index">
					<img :src="url.App_img" alt="" />
					<div class="info">
						<span>2400 x 2072 · png</span>
						<span>freebiesupply.com</span>
					</div>
				</li>
			</ul>
			<ul>
				<li v-for="(url, index) in image" :key="index">
					<img :src="url.App_img" alt="" />
					<div class="info">
						<span>2400 x 2072 · png</span>
						<span>freebiesupply.com</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			image: [
				{
					App_img:
						'https://tse1-mm.cn.bing.net/th/id/OIP-C.b8HASxFPkrLqZ0fJoLV_YQHaGZ?w=195&h=180&c=7&o=5&dpr=1.25&pid=1.7',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
				{
					App_img:
						'',
				},
			],
		}
	},
}
</script>

<style lang="scss">
* {
	padding: 0;
	margin: 0;
}
.image {
	padding: 10px;
	background-color: #fff;
	margin-top: -2px;
	display: inline-block;
	width: calc(100% - 20px);
	.imageCont {
		width: 100%;
		margin-right: -12px;
		line-height: 1.2em;
		ul {
			padding-bottom: 12px;
			width: auto;
			width: 100%;
			margin-left: 12px;
			li {
				height: 180px;
				margin-right: 12px;
				display: inline-block;
				vertical-align: top;
				margin-top: 10px;
				position: relative;
				box-sizing: border-box;
				cursor: pointer;
				&:hover .info {
					display: block;
				}
				img {
					height: 180px;
					box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 4px 1px rgb(0 0 0 / 14%);
				}
				.info {
					height: 36px;
					top: auto;
					bottom: 0;
					color: #fff;
					background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
					padding: 12px 0;
					pointer-events: none;
					position: absolute;
					width: 100%;
					display: none;
					font-size: 12px;
					span {
						padding-left: 12px;
						display: block;
					}
				}
			}
		}
	}
}
</style>

